<template>
  <div class=" main">
     <a-affix :offset-top="66">
    <div class="banner" :style="{background: 'url('+require('@/assets/policy/banner.png')+')',height:'80px',backgroundSize: 'cover'}">
        <div class="title-box" >
          <p  class="title" >政策资源库</p>
        </div>
    </div>
    </a-affix>
    <FixedMenu menuClass="fixed-menu">
      <div class="fixed-menu">
        <div v-has="'projectBuild:add'" class="functionMould" style="background-color: #ffffff" @click="projectBuild">
          
          <a-icon type="project" class="menu-icon" />
          <span>我要立项</span>
        </div>
        <!-- v-has="'policy:add'" -->
        <div  class="functionMould" style="background-color: #ffffff" @click="handleNewFile">
          <a-icon type="file-add" class="menu-icon" />
          <span> 新建文档</span>
        </div>
        <div class="functionMould" style="background-color: #ffffff" @click="handleMyFile">
          <a-icon type="file-text" class="menu-icon" />
          <span> 我的文档</span>
        </div>
        <!-- <div class="functionMould" style="background-color: #ffffff" @click="handleMyCollect">
          <a-icon type="star" class="menu-icon" />
          <span> 我的收藏</span>
        </div> -->
        
        <div v-has="'policy:privateGroup'" class="functionMould" style="background-color: #ffffff" @click="handleGroup">
          <a-icon type="lock" class="menu-icon" />
          <span>私有组</span>
        </div>
        <div v-has="'policy:admin'" class="functionMould" style="background-color: #ffffff" @click="handleFileClass">
          <a-icon type="hdd" class="menu-icon" />
          <span>文件大类管理</span>
        </div>
          <div  class="functionMould" style="background-color: #ffffff" @click="handleBatchFile">
          <a-icon type="hdd" class="menu-icon" />
          <span>批量上传</span>
        </div>
      </div>
    </FixedMenu>  
     <div class="container">
       <div class="trademark-nav" :class="{'trademark-nav-hidden': showMore}">                 
        <div class="projec-class-box clearFix projec-class-input" style="">             
            <div>
              <div class="projec-class-lable" style="float:left">发布时间：</div>
              <ul class="projec-class-list clearFix" >
                <li :class="['hoverShow',{clickShow:!searchTab.publish||searchTab.publish== ''}]" @click="ToggleSelectType('','publish')">全部</li>
                <li :class="['input-li',{'input-li-active':!!searchTab.publish}]"><a-month-picker  valueFormat='YYYY-MM' placeholder="发布时间" @change="onChangeMonth" /></li>
              </ul>
            </div>  
            <div>
            <div class="projec-class-lable" style="float:left">适用地区：</div>
              <ul class="projec-class-list clearFix" >
              <li :class="['hoverShow',{clickShow:!searchTab.area||searchTab.area==''}]" @click="ToggleSelectType('','area')">全部</li>
              <li :class="['input-li',{'input-li-active':!!searchTab.area}]">
                <a-cascader 
                :show-search="{ filterArea }"            
                placeholder="请输入适用地区"
                :field-names="{ label: 'label', value: 'label',children:'children' }"
                :options="cityData"
                change-on-select
                @change="onChangeArea"
              />
              </li>
            </ul>
            </div>  
            <div>
              <div class="projec-class-lable" style="float:left">责任机构：</div>
              <ul class="projec-class-list clearFix" >
                <li :class="['hoverShow',{clickShow:!searchTab.mechanism||searchTab.mechanism==[]}]" @click="ToggleSelectType('','mechanism')">全部</li>
                <li :class="['input-li',{'input-li-active':!!searchTab.mechanism}]"> 
                    <a-select show-search :filter-option="filterOption" v-model="searchTab.mechanism" @change="(value)=>ToggleSelectType(value,'mechanism')" placeholder="请输入责任机构">          
                    <a-select-option v-for="d in dics.mechanism" :key="d.name">{{ d.name }}</a-select-option>
                  </a-select>                
                </li>
              </ul>
            </div> 
        </div>
        <div class="projec-class-box clearFix" :class="{'project-class-more': more.moreRef0Class}" ref="moreRef0" >
            <div class="projec-class-lable" style="float:left">业务板块：</div>
              <ul class="projec-class-list clearFix" :class="{'projec-class-list-more': more.moreRef0}">
              <li :class="['hoverShow',{clickShow:!searchTab.business||searchTab.business==''}]" @click="ToggleSelectType('','business')">全部</li>
              <li :class="['hoverShow',{clickShow:searchTab.business==item.name}]" @click="ToggleSelectType(item.name,'business')" v-for="(item,index) in dics.business" :key="index">{{item?item.name:'--'}}</li>
            </ul>
            <div class="btn-more" @click="changeMore('moreRef0')">更多<a-icon :class="[ 'icon-child-down', { 'icon-child-up': more.moreRef0 }]" slot="suffixIcon" type="caret-up"/></div>
        </div>
        <!-- <div class="projec-class-box clearFix">
            <div class="projec-class-lable" style="float:left">适用地区：</div>
              <ul class="projec-class-list clearFix" >
              <li :class="['hoverShow',{clickShow:!searchTab.area||searchTab.area==''}]" @click="ToggleSelectType('','area')">全部</li>
              <li :class="['input-li',{'input-li-active':!!searchTab.area}]">
                <a-cascader
             
                placeholder="请输入适用地区"
                :field-names="{ label: 'label', value: 'label',children:'children' }"
                :options="cityData"
                change-on-select
                @change="onChangeArea"
              />
              </li>
            </ul>
        </div> 
        <div class="projec-class-box clearFix">
            <div class="projec-class-lable" style="float:left">责任机构：</div>
              <ul class="projec-class-list clearFix" >
              <li :class="['hoverShow',{clickShow:!searchTab.mechanism||searchTab.mechanism==[]}]" @click="ToggleSelectType('','mechanism')">全部</li>
              <li :class="['input-li',{'input-li-active':!!searchTab.mechanism}]"> 
                  <a-select show-search :filter-option="filterOption" v-model="searchTab.mechanism" @change="(value)=>ToggleSelectType(value,'mechanism')" placeholder="请输入责任机构">
          
                  <a-select-option v-for="d in dics.mechanism" :key="d.name">{{ d.name }}</a-select-option>
                </a-select>
                
              </li>
            </ul>
        </div>-->
         <div class="projec-class-box clearFix" :class="{'project-class-more': more.moreRef1Class}" ref="moreRef1">
            <div class="projec-class-lable" style="float:left">专题专项：</div>
            <ul class="projec-class-list clearFix"  :class="{'projec-class-list-more': more.moreRef1}">
              <li :class="['hoverShow',{clickShow:!searchTab.special||searchTab.special==''}]" @click="ToggleSelectType('','special')">全部</li>
              <li :class="['hoverShow',{clickShow:searchTab.special==v.name}]" @click="ToggleSelectType(v.name,'special')" v-for="(v,i) in dics.special" :key="i">{{v.name}}</li>
            </ul>
            <div class="btn-more" @click="changeMore('moreRef1')">更多<a-icon :class="[ 'icon-child-down', { 'icon-child-up': more.moreRef1 }]" slot="suffixIcon" type="caret-up"/></div>
        </div>
         <div class="projec-class-box clearFix  projec-class-input">
            <div>
            <div class="projec-class-lable" style="float:left">申报状态：</div>
              <ul class="projec-class-list clearFix" >
              <li :class="['hoverShow',{clickShow:!searchTab.declareStatus||searchTab.declareStatus==''}]" @click="ToggleSelectType('','declareStatus')">全部</li>
              <li :class="['hoverShow',{clickShow:searchTab.declareStatus==v.code}]" @click="ToggleSelectType(v.code,'declareStatus')" v-for="(v,i) in dics.declareStatus" :key="i">{{v.name}}</li>
             
            </ul>
            
            </div>
          
        </div>     
         <div class="projec-class-box clearFix  projec-class-input">
            <div>
            <div class="projec-class-lable" style="float:left">签收状态：</div>
              <ul class="projec-class-list clearFix" >
              <li :class="['hoverShow',{clickShow:!searchTab.signStatus||searchTab.signStatus==0}]" @click="ToggleSelectType(null,'signStatus')">全部</li>
              <li :class="['hoverShow',{clickShow:searchTab.signStatus==v.code}]" @click="ToggleSelectType(v.code,'signStatus')" v-for="(v,i) in dics.signStatus" :key="i">{{v.name}}</li>
            </ul>
            </div>
        </div>
        <div v-has="'policy:admin'" class="projec-class-box clearFix  projec-class-input">
            <div>
            <div class="projec-class-lable" style="float:left">项目预报：</div>
              <ul class="projec-class-list clearFix" >
              <li :class="['hoverShow',{clickShow:!forecast||forecast.length == 0}]" @click="ToggleSelectType(null,'forecast')">全部</li>
              <li :class="['input-li',{'input-li-active':!!forecast.length>0 && !!searchTab}]">
                <!-- <a-month-picker v-model="forecastStart"  :disabledDate="disabledDate" valueFormat='YYYY-MM' placeholder="预报开始时间" @change="(value, mode)=>handleForecastChange(value, mode,'forecastEnd')" />
                <span style="padding:0 8px">~</span>
                <a-month-picker v-model="forecastEnd" :disabledDate="disabledDate"  valueFormat='YYYY-MM' placeholder="预报结束时间" @change="(value, mode)=>handleForecastChange(value, mode,'forecastStart')" /> -->


                 <a-range-picker
                 v-model="forecast"
                  :disabled-date="disabledDate"
                  valueFormat='YYYY-MM-DD'
                  format="YYYY-MM-DD"
                  @change="handleForecastChange"
                /> 
          
              </li>
            </ul>
            </div>
        </div>       
         <!-- <div class="projec-class-box clearFix">
            <div class="projec-class-lable" style="float:left">签收状态：</div>
              <ul class="projec-class-list clearFix" >
              <li :class="['hoverShow',{clickShow:!searchTab.signStatus||searchTab.signStatus==0}]" @click="ToggleSelectType(null,'signStatus')">全部</li>
              <li :class="['hoverShow',{clickShow:searchTab.signStatus==v.code}]" @click="ToggleSelectType(v.code,'signStatus')" v-for="(v,i) in dics.signStatus" :key="i">{{v.name}}</li>
            </ul>
        </div> -->
      </div>
      <div class="trademark-tap"> 
        <span @click="showMore = !showMore">全部{{ !showMore ? '收起' : '展开'}}
          <a-icon :class="[ 'icon-child-down', { 'icon-child-up': showMore }]" slot="suffixIcon" type="caret-up"/>
        </span>
      </div>
      <div class="data-main" :class="{'shrinkage': shrinkageFlag}">          
          <div class="box-left ant-table-scroll" >
            <div class="tree-title">
              <span class="bold">目录</span>
              <a-icon type="menu-fold" @click="shrinkageFlag = !shrinkageFlag"  :title="!shrinkageFlag? '收缩目录' : '展开目录'"/>
            </div>
            <div class="tree" v-if="!shrinkageFlag">
              <a-tree
               
                v-if="treeData.length"
                :tree-data="treeData"
                :selectedKeys="treeSelectedKeys"
                :defaultExpandAll="true"
                @select="onSelectClass"
                :row-selection="rowSelection"
                :show-line="true"
              />
            </div>
          </div>
          <div class="box-right" >            
            <div class="main-top">
              <div>
                <a-checkbox  :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
                    全选
                </a-checkbox>
              <!-- <a-button icon="plus" @click="handleNewFile" type="primary">新增</a-button>
               <a-button icon="plus" @click="handleBatchFile" >批量新增</a-button> --> 
               <a-button icon="reload" @click="handleReload">刷新</a-button>
              <a-button @click="handleCollect">收藏文档</a-button>

               <a-button icon="star" @click="handleUnCollect">取消收藏</a-button>
                <a-button icon="plus"  @click="handleForecastAdd" v-has="'policy:admin'" v-if="!!forecast.length>0 && !!searchTab">添加项目预报</a-button>
                <a-button icon="bar-chart" @click="handleForecast" v-has="'policy:admin'">待更新列表</a-button>
               <!-- v-if="ipagination.myFlag == 1 || ipagination.myManager == 1" 
              
              -->
              <a-button  v-show="btnFlag"  @click="handleAllFile"  
                >共享给我的</a-button
              >
              <!-- :type="ipagination.myFlag == 1 && ipagination.myManager != 1 ? 'danger' : ''" -->
              <a-button v-show="btnFlag"  :type="ipagination.myFlag == 1  ? 'primary' : ''"
                @click="handleMyFile"
              
                
                >我起草的文档</a-button
              >
              <!-- :type="ipagination.myFlag != 1 && ipagination.myManager == 1 ? 'danger' : ''" -->
              <a-button v-show="btnFlag"  :type=" ipagination.myManager == 1 ? 'primary' : ''" 
                @click="handleMyManagerFile"
               
                
                >我管理的文档</a-button
              >
               <a-button  icon="star" v-show="btnFlag" @click="handleMyCollect" :type="ipagination.myCollectFlag == 1 ? 'primary' : ''">我的收藏</a-button>
              <a-button icon="delete" v-show="ipagination.myFlag == 1 || ipagination.myManager == 1" @click="handleDelete">删除</a-button>
              <a-button :loading="exportLoading" icon="download"  @click="handleExportExcel">导出</a-button>
              <a-button  icon="notification" v-has="'policy:admin'"   @click="pushCompany"  
            
                >推送公司</a-button
              >
               <!-- <span class="showTotal" style="margin-right:10px;">
                总数：<span style="color:#50a9fb;">{{ipagination.total}}</span>
              </span> -->
              <a-input-group compact>
                <a-input-search :allowClear="true" placeholder="按政策名称、政策编号、责任机构、政策级别、相关企业模糊查询" v-model="ipagination.allSearch" @change="onSearch" @search="onSearch" />
              </a-input-group>    

              <a-button icon="filter" @click="openSearchForm">高级筛选</a-button>         
            </div>
            <div class="right-side">                
              <div :class="{'active': typeFlag === 'list'}" @click="typeFlag = 'list'"><a-icon type="bars" />横向</div>                
              <div :class="{'active': typeFlag === 'card'}" @click="typeFlag = 'card';"><a-icon type="appstore" />卡片</div>                      
            </div>
            </div>
            <div :class="['main-table',`project-${typeFlag}`]">  
              <a-spin :spinning="loading">
                <a-checkbox-group v-model="selectedRowKeys" @change="onListChange">
                  <a-empty v-if="fileList.length == 0 && !loading"/>
                  <div class="tab-info risk-list-hover" v-for="(item) of fileList" :key="item.id" >
                    <template v-if="typeFlag=='list'">
                      <div>
                        <div class="allSelect"> 
                          <a-checkbox :value="item.id"></a-checkbox>
                        </div>
                        <div class="text-hidden list-title" :title="item.fileName" @click="handleViewFile(item)" >
                          <span> <i class="new-box" v-if="checkNew(item)">NEW</i>{{item.fileTypeName}}</span>
                          <span>{{item.fileNo}}</span>
                          <span>{{item.fileName}}</span>
                        </div>
                      </div>
                      <div>
                        <div class="line-bar-box">
                          <span v-for="(attr,j) of item.showInTableAttr" :key="j">{{attr.name}}：
                            <span v-if="attr.name == '申报状态' && attr.content == '已截止'" style="color:#b1b1b1">{{!!attr.content?attr.content:'--'}}</span> 
                            <span v-else-if="attr.name == '申报状态'" style="color:red">{{!!attr.content?attr.content:'--'}}</span>
                            <span v-else-if="attr.name == '相关企业'" style="color:red">{{!!attr.content?attr.content:'--'}}</span>
                            <span v-else-if="attr.name == '文件状态' && attr.content == '已失效'" style="color:#b1b1b1">{{!!attr.content?attr.content:'--'}}</span> 
                            <span v-else-if="attr.name == '文件状态'" style="color:red">{{!!attr.content?attr.content:'--'}}</span> 
                            <span v-else >{{!!attr.content?attr.content:'--'}}</span>
                          </span>
                          <span v-if="item.publishUser">发布人：<span>{{item.publishUser}}</span></span> 
                          <span v-else> 创建人：<span>{{item.createUser}}</span></span> 
                          <span v-if="item.publishDept">发布部门：<span>{{item.publishDept}}</span></span>
                        </div>
                        <div class="tip-span line-bar-box">
                          <span @click.stop="handleShowLog(4, item)"><a-icon type="code" theme="filled" style="margin-right:3px;" />利用 {{(item.fileActionCount && item.fileActionCount.useN) || '0'}}</span>
                          <span @click.stop="handleShowLog(1, item)"><a-icon type="eye" theme="filled" style="margin-right:3px;" />查看 {{(item.fileActionCount && item.fileActionCount.readN) || '0'}}</span>
                          <span @click.stop="handleShowLog(3, item)"><a-icon type="star" theme="filled" style="margin-right:3px;" />收藏 {{ (item.fileActionCount && item.fileActionCount.collectN) || '0' }}</span>
                          <span @click.stop="handleShowLog(2, item)"><a-icon type="download" style="margin-right:3px;" />下载 {{(item.fileActionCount && item.fileActionCount.downloadN) || '0'}}</span>
                          <span title="分享" v-if="item.fileAuthority && item.fileAuthority.split(',').indexOf('6')>-1">
                            <FileShareForm :fileId="item.id" type="text"/>
                          </span>
                        </div>
                      </div>
                    </template>
                    <template v-else>
                      <div>
                        <div class="line-bar-title">
                          <div class="allSelect"> 
                            <a-checkbox :value="item.id"></a-checkbox>
                          </div>
                          <a :title="item.fileTypeName + item.fileNo + item.fileName" @click="handleViewFile(item)" >
                            <span><i class="new-box" v-if="checkNew(item)">NEW</i></span>
                            <span>{{item.fileName}}</span>
                          </a>
                        </div>
                        <p class="line-bar-p" v-for="(attr,j) of item.showInTableAttr" :key="j">
                          <span>{{attr.name}}：</span>
                          <span v-if="attr.name == '申报状态' && attr.content == '已截止'" style="color:#b1b1b1">{{!!attr.content?attr.content:'--'}}</span> 
                          <span v-else-if="attr.name == '申报状态'" style="color:red">{{!!attr.content?attr.content:'--'}}</span>
                          <span v-else-if="attr.name == '相关企业'" style="color:red">{{!!attr.content?attr.content:'--'}}</span>
                          <span v-else-if="attr.name == '文件状态' && attr.content == '已失效'" style="color:#b1b1b1">{{!!attr.content?attr.content:'--'}}</span> 
                          <span v-else-if="attr.name == '文件状态'" style="color:red">{{!!attr.content?attr.content:'--'}}</span> 
                          <span v-else >{{!!attr.content?attr.content:'--'}}</span>
                        </p>
                        <p class="line-bar-p">
                          <template  v-if="item.publishUser"><span>发布人：</span><span>{{item.publishUser}}</span></template> 
                          <template v-else> <span>创建人：</span><span>{{item.createUser}}</span></template> 
                        </p>
                        <p class="line-bar-p" v-if="item.publishDept"> 
                          <span>发布部门：</span><span :title="item.publishDept">{{item.publishDept}}</span>                         
                        </p>                      
                      </div>
                      <div class="tip-span line-bar-box">
                        <span @click.stop="handleShowLog(4, item)" title="利用"><a-icon type="code" theme="filled"/> {{(item.fileActionCount && item.fileActionCount.useN) || '0'}}</span>
                        <span @click.stop="handleShowLog(1, item)" title="查看"><a-icon type="eye" theme="filled"/> {{(item.fileActionCount && item.fileActionCount.readN) || '0'}}</span>
                        <span @click.stop="handleShowLog(3, item)" title="收藏"><a-icon type="star" theme="filled"/> {{ (item.fileActionCount && item.fileActionCount.collectN) || '0' }}</span>
                        <span @click.stop="handleShowLog(2, item)" title="下载"><a-icon type="download" /> {{(item.fileActionCount && item.fileActionCount.downloadN) || '0'}}</span>
                        <span title="分享" v-if="item.fileAuthority && item.fileAuthority.split(',').indexOf('6')>-1">
                          <FileShareForm :fileId="item.id" type="text"/>
                        </span>
                      </div>
                    </template>
                    <div v-if="!!item['文件状态']" :class="['status-box',`projectStatusColor${item['文件状态'].startsWith('生效中')?'2':3}`]">
                      {{item['文件状态']}}
                    </div> 
                    <div v-if="!!item['申报状态']" :class="['status-box',`projectStatusColor${item['申报状态'].startsWith('还剩') || item['申报状态'].startsWith('生效中') ?'2':item['申报状态'].startsWith('未开始')?1:3}`]">
                      {{item['申报状态'].startsWith('还剩')  ?'生效中':item['申报状态']}}
                    </div> 
                  </div>
                </a-checkbox-group>
                <a-pagination
                  size="small"
                  v-model="ipagination.current"
                  show-size-changer
                  :showTotal="ipagination.showTotal"
                  :page-size.sync="ipagination.pageSize"
                  :total="ipagination.total"
                  :pageSizeOptions="ipagination.pageSizeOptions"
                  @change="handleListChange"
                  @showSizeChange="handleListChange"
                />
              </a-spin>
            </div>
          </div>
        </div>      
     </div>
    <index-lib-log-modal ref="logModal" :otherOperateType="[{ value: 4, label: '利用' }]"/>
    <hte-lib-company-push-table-modal ref="pushTableModal"></hte-lib-company-push-table-modal>
    <policy-forecast-modal ref="policyForecastModal" :listUrl="url.forecastList" ></policy-forecast-modal >
     <a-modal
        :visible="showSuperSearchForm"
        width="70vw"
        :bodyStyle="{ padding: '10px' }"
        title="高级查询"
        @cancel="handleToCancel"
      >
        <template slot="footer">
          <a-button @click="handleToCancel">取消</a-button>
          <a-button @click="clearSearch">清空</a-button>
          <a-button type="primary" @click="handleToSearch">查询</a-button>
        </template>
        <a-form-model ref="ruleForm" :model="superSearch" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="文件编号">
                <a-input v-model="superSearch.fileNo" allowClear />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="文件名称">
                <a-input v-model="superSearch.fileName" allowClear />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="业务板块">
                <a-input v-model="superSearch.business" allowClear />
              </a-form-model-item>
            </a-col>
             <a-col :span="8">
              <a-form-model-item label="政策级别">
                <a-input v-model="superSearch.policyLevel" allowClear />
              </a-form-model-item>
            </a-col>
             <a-col :span="8">
              <a-form-model-item label="政策发布时间">
                <a-input v-model="superSearch.publish" allowClear />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="申报结束时间">
                <a-input v-model="superSearch.declareEnd" allowClear />
              </a-form-model-item>
            </a-col>
          </a-row>
          
        </a-form-model>
      </a-modal>
  </div>
</template>

<script>

import { getAction, postAction ,downFile,downloadFileLink } from '@/api/manage'
import IndexLibLogModal from './modules/IndexLibLogModal'
import moment from 'moment'
import {policylLevel}  from  '@/views/library/dics'
import { formatDate } from '@/utils/util'
import { getActionAsync } from '../../api/manage'
import cloneDeep from 'lodash/cloneDeep'
import { ResizeHandleMoreMixin } from '@/mixins/ResizeHandleMoreMixin'
import FixedMenu from '@/components/tools/FixedMenu'
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows)
  },
}

export default {
  name: 'Policy',
  components: {
    FixedMenu,
    IndexLibLogModal,
    HteLibCompanyPushTableModal: () => import('@/views/library/company/modules/HteLibCompanyPushTableModal'),
    PolicyForecastModal:()=> import('@/views/library/modules/PolicyForecastModal'),
    FileShareForm: () => import('@/views/library/components/FileShareForm')
  },
  mixins: [ResizeHandleMoreMixin],
  props: {
    parentId:{
    default:null
  }},
  data() {
    return {
      typeFlag: 'list', // 默认横向
      forecast:[],
      showMore: false,
      indeterminate:false,
      checkAll:false,
      plainOptions:[],
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      cityData:[],
      superSearch:{},
      showSuperSearchForm:false,
      superQueryFlag:false,
      searchTab:{
        superSearch:{},
        publish:'',
        business:'',
        policylLevel:'',
        area:'',
        mechanism:'',
        special:'',
        declareStatus:'1',
        signStatus:2,
        forecastStart:'',
        forecastEnd:'',
        //过滤已截止查询标识
        //filterClose:'0',
      },
      dics:{
        business:[{code:'',name:'工程技改'},{code:'',name:'科技创新'}],
        policylLevel:policylLevel,
      
        special:[{code:'',name:'专精特新'}],
        declareStatus:[{code:'1',name:'申报中'},{code:'2',name:'未开始'},{code:'3',name:'已截止'},{code:'-1',name:'政策匹配结果'}],
        signStatus:[{code:'1',name:'已签收'},{code:'2',name:'未签收'}],
        mechanism:[]
      },
      // parentId: this.$route.params && this.$route.params.id, //库id
      searchForm: {},
      columns: [
        {
          title: '文件编号',
          dataIndex: 'fileNo',
          key: 'fileNo',
          fixed: 'left'
        },
        {
          title: '文件名称',
          dataIndex: 'fileName',
          key: 'fileName',
          scopedSlots: { customRender: 'fileName' },
        },
        {
          title: '文件类别',
          dataIndex: 'fileTypeName',
          key: 'fileTypeName',
        },
        {
          title: '发布日期',
          dataIndex: 'effectTime',
          key: 'effectTime',
        },
        {
          title: '操作',
        },
      ],
      rowSelection,
      ipagination: {
        allSearch:'',
        current: 1,
        pageSize: 30,
        pageSizeOptions: ['30', '50', '100'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
    
        fileType: 0,
        total: 0,
        signFlag:0
      },
      
      loading: false,
      treeData: [],
      treeDataShow:[],
      // replaceFields: {
      //   children: 'children',
      //   title: 'name',
      //   key: 'id',
      // },
      fileList: [],
      selectedRowKeys: [],
      loading: false,
      treeSelectedKeys: [],
      url: {
        list: '/lib/hteLibFile/list',
        getTreeList: '/lib/hteFileClass/getTreeList',
        collectOperate: '/lib/hteLibLog/collect',
        unCollectOperate: '/lib/hteLibLog/unCollect',
        listAttr: '/lib/hteFileClass/listAttr',
        statis: '/lib/hteLibLog/statis',
        deleteFile: '/lib/hteLibFile/deleteBatch',
        exportDynamicExcel: '/lib/hteLibFile/exportDynamicExcel',
        specialList: "/policy/policySpecial/list",
        mechanismList: "/policy/policyMechanism/list",
        businessList: "/policy/policyBusiness/list",
        areaInfo:'/manage/codeInfo/areaInfo',
        ifSign: '/lib/hteLibFile/ifSign/',
        hteLibPolicyForecast:'/policy/hteLibPolicyForecast/add',
        forecastList:'/policy/hteLibPolicyForecast/list'
      },
      classId: this.$route.params && this.$route.params.id,
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'home',
        badgecount: '',
      },
      exportLoading:false,
      btnFlag:false,
      shrinkageFlag: false, // 收起菜单
    }
  },
  computed:{
    checkNew(){
      return function(row){
          var createTime = row.createTime
          var myDate = new Date();
          myDate.setDate(myDate.getDate() - 10);
          myDate = new Date(formatDate(myDate.getTime(), 'yyyy-MM-dd'))
          const dateRow = new Date(createTime);
      
        if(!row.ifSign && dateRow.getTime() > myDate.getTime()){
          return true
        }else{
           return false
        }
            
      }  
    }
  },
  watch:{
    parentId:function(val,oldVal){
        this.initData();
    },
  },
  created() {
    // this.initData();
   
  },
  mounted () {
    this.initData();
  },
  methods: {
    initData(){
        
        this.classId = this.parentId
        this.fetchClassAttr()
        this.fetchClassTree()
        this.initDics()
    },
    //加载数据字典
    initDics(){
      let that = this
      getAction(this.url.specialList, {pageNo: 1, pageSize: -1 }).then(res => {
        if (res.success) {
          this.dics.special= res.result.records
          this.$nextTick(() => { 
            this.setBtnMore('moreRef1')
          });
        }
      })
      getAction(this.url.businessList, {  pageNo: 1, pageSize: -1 ,column:"code",order:"Asc"}).then(res => {
        if (res.success) {
          this.dics.business= res.result.records
          this.$nextTick(() => { 
            this.setBtnMore('moreRef0')
          });
        }
      })
       getAction(this.url.businessList, {  pageNo: 1, pageSize: -1 ,column:"code",order:"Asc"}).then(res => {
        if (res.success) {
          this.dics.business= res.result.records
        }
      })
      this.getArea();
      
    },
    getMechanismList(data = {area : ''}){
       getAction(this.url.mechanismList, Object.assign({  pageNo: 1, pageSize: -1 },data) ).then(res => {
        if (res.success) {
            this.dics.mechanism = res.result.records
            // this.$forceUpdate()
        }
      })
    },
     filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
     getArea(){
        this.dics.mechanism = []
         getAction(this.url.areaInfo, {  pageNo: 1, pageSize: -1 }).then(res => {
        if (res.success) {
          this.cityData= res.result
        }
      })
      },
      filterArea(inputValue, path) {
        return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
      },
    /**
     * 头部查询方法
     */
    onSearch() {
      this.clearQueryParams(0)
      this.fetchFileList(1)
    },
    handleToSearch() {
      //高级查询
      this.clearQueryParams(1)
     debugger
      this.searchTab.superSearch =  this.superSearch
      this.fetchFileList(1)
      this.showSuperSearchForm = false
    },
    clearSearch() {
      this.superSearch =  {}
      this.fetchFileList(1)
    },
    handleToCancel() {
      this.showSuperSearchForm = false
    },
    openSearchForm() {
      this.showSuperSearchForm = true
    },
    handleReload(){
      this.clearQueryParams(1)
      this.fetchFileList(1)
    },
    /**
     * 选择树节点，切换列表数据
     */
    onSelectClass(selectedKeys,e) {
      
      if(!e.selected){
        selectedKeys = this.treeSelectedKeys
      }
      this.classId = selectedKeys[0]
      this.ipagination.fileType = selectedKeys[0]
       this.treeSelectedKeys = selectedKeys
      this.fetchClassAttr()
      this.fetchFileList(1)
    },
    onTreenChange(value){
      
      this.classId = value
      this.ipagination.fileType = value
      this.$forceUpdate();
      this.fetchClassAttr()
      this.fetchFileList()
      
    },
    /**
     * 表结构切换页码
     */
    handleTableChange(pagination, filters, sorter) {
      this.ipagination = pagination
      this.ipagination.pageNo = this.ipagination.current
      this.fetchFileList()
    },
    handleListChange(page,pageSize){
       this.ipagination.pageSize = pageSize
      this.ipagination.pageNo = page
      this.fetchFileList()
    },
    /**
     * 加载用户的分类树
     */
    async fetchClassTree() {
      const that = this
      getAction(this.url.getTreeList, { parentId: that.classId }).then((res) => {
        if (res.success) {
          res.result.treeList[0].selectable = true
          that.treeDataShow =[...res.result.treeList]
          
          // that.treeData.forEach((it,i) => {
          //   if(i != 0){
          //       it.selectable = true
          //   }
            
          // })
          
           that.treeData = res.result.treeList[0].children
          that.classId = that.treeData[0].value;
          that.treeSelectedKeys = [this.classId]
          that.ipagination.fileType =  that.classId
          let allTree = {children:null,label:'全部',title:'全部',key:res.result.treeList[0].value,value:res.result.treeList[0].value}
         
           that.treeData.unshift(allTree)
          that.fetchFileList(1)

        }
      })
    },
    getQueryParams(){
      this.ipagination.fileType = this.classId
      let param = Object.assign({},this.ipagination)
      delete param.showTotal
      delete param.pageSizeOptions
      this.ipagination.pageNo = this.ipagination.current
      param.classId = this.$route.params && this.$route.params.id
      param.searchTabJson = JSON.stringify(this.searchTab) 
      return param;
    },
    clearQueryParams(arg){
      if(arg==1){
        //清空搜索框
        this.ipagination.allSearch = ''
      }
      
      this.ipagination.current = 1
      this.ipagination.searchTabJson = '';
      this.ipagination.matchingCompany = false
      this.ipagination.signFlag = 0
      this.searchTab = {
        publish:'',
        business:'',
        policylLevel:'',
        area:'',
        mechanism:'',
        special:'',
        declareStatus:'',
        signStatus:0,
        forecastStart:'',
        forecastEnd:'',
        superSearch:{},
        //过滤已截至查询标识
        filterClose:'1',
      }
      
    },
    
    async fetchFileList(arg) {
      this.showBtn();
      this.loading = true
      this.fileList = []
      this.ipagination.fileType = this.classId
      let param = this.getQueryParams()
      if(arg == 1){
         this.ipagination.current = 1;
      }
      this.ipagination.pageNo = this.ipagination.current
      const that = this
      param.actionFlag=true
      getAction(this.url.list, param).then((res) => {
        if (res.success) {
           this.selectedRowKeys = []
           this.onListChange([])
          
          this.fileList = res.result.records || res.result
          this.plainOptions = [];
          if (res.result.total) {
            that.ipagination.total = res.result.total
          } else {
            that.ipagination.total = 0
          }

          this.fileList.forEach((row) => {
            that.plainOptions.push(row.id)
            // if (row.fileType == that.classId && row.attrs) {
            //   row.attrs.forEach((attr) => {
            //     if (attr.showInTable) {
            //       row['attr' + attr.attrId] = attr.content
            //     }
            //     row[attr.name] = attr.content
            //   })
              
            // }
            let showInTableAttr = []
            if( row.attrs){
              
               row.attrs.forEach((attr) => {
                 if (attr.showInTable) {
                    row[attr.name] = attr.content
                    if(attr.name === '申报状态' || attr.name === '文件状态'  ){
                        
                        that.$set(row, attr.name,attr.content)
                        // row[attr.name] = that.declareStatus(row.attrs)
                        // attr.content = that.declareStatus(row.attrs)
                    }
                    showInTableAttr.push(attr) 
                 }
                })
                
            }
            row.showInTableAttr = showInTableAttr;
            // if(!param.actionFlag){
            //   getAction(that.url.statis, { fileId: row.id }).then((res2) => {
            //     if (res2.success) {
                  
            //       that.$set(row, 'fileActionCount', res2.result)
                
            //     }
            //   })
            //   that.$set(row, 'ifSign', false)
            //   that.checkIsNew(row);
            // }
           

          })
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
     
      
    },
     declareStatus(attrs) {
      var that = this
      var name = '申报状态'
      var status = ''
      var startTime = attrs.find(item=>{
        return item.name =='申报开始时间'
      })
      var endTime = attrs.find(item=>{
        return item.name =='申报结束时间'
      })
      var nowTiem = new Date(formatDate(new Date().getTime(), 'yyyy-MM-dd')).getTime()
      if (!!startTime && !!endTime && !!startTime.content && !!endTime.content) {
          startTime = startTime.content
          endTime = endTime.content
        if (new Date(startTime).getTime() > nowTiem) {
         status = '未开始'
        } else if (new Date(endTime).getTime() < nowTiem) {
         status ='已截止' 
        } else {
          var day = new Date(endTime).getTime() - nowTiem
          day = day / (24 * 60 * 60 * 1000)
         status = `还剩${day}天`
        }
      }
      return status
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    handleCollect() {
     
      var ids = this.getSelect()
      if(!!ids){
          const that = this
      getAction(that.url.collectOperate, { fileIds: ids }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.fetchFileList();
        } else {
          that.$message.warning(res.message)
        }
      })
      }
      
    },
    handleUnCollect(){
      
      var ids = this.getSelect()
      if(!!ids){
          const that = this
           this.$confirm({
        title: '确定取消收藏文档？',
        onOk() {
            getAction(that.url.unCollectOperate, { fileIds: ids }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.fetchFileList();
        } else {
          that.$message.warning(res.message)
        }
       })
        }
        })
      
      }
    },
    handleForecastAdd(){
      let that =this
      let ids = this.getSelect()

      if(!!ids){
        
          getAction(that.url.hteLibPolicyForecast, { fileIds: ids }).then((res) => {
          if (res.success) {
            that.$message.success(res.message)
          } else {
            that.$message.warning(res.message)
          }
        })
      }

    },
    handleForecast(){
      this.$refs.policyForecastModal.open();
      this.$refs.policyForecastModal.title='项目预报'
    },
    pushCompany(){
      if (this.selectedRowKeys.length != 1) {
        this.$message.warning('请选择一条记录！')
        return;
      }
      let fileId = this.selectedRowKeys[0];
      this.$refs.pushTableModal.open(fileId)
    },
    getSelect(){
       var ids = ''
       if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一条记录！')
      }
     
      for (var a = 0; a < this.selectedRowKeys.length; a++) {
        ids += this.selectedRowKeys[a] + ','
      }
      return ids
    },
    handleDelete(){
      let ids = this.getSelect()
       if(!!ids){
        const that = this
        this.$confirm({
        title: '确定要删除选中的文件？',
        onOk() {
            getAction(that.url.deleteFile, { ids: ids }).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.fetchFileList(1);
              
            } else {
              that.$message.warning(res.message)
            }
          })
        },
        onCancel() {},
      });
      
      }
    },
    handleExportExcel(){
      let param = this.getQueryParams();
  
      console.log("导出参数",param)
      this.exportLoading = true;
      downloadFileLink(this.url.exportDynamicExcel,'政策库导出.xls', param,{type: 'application/vnd.ms-excel'}).then((data)=>{
        this.exportLoading = false;
      })
  
    },
    handleViewFile(row) {
      // this.$router.push('/library/file/info/' + row.id)
      // this.$router.push()
      // window.open('/library/file/info/' + row.id)
      if (this.ipagination.myFlag == 1 || this.ipagination.myManager == 1) {
        let urlJump = this.$router.resolve({ path: '/library/file/edit/' + this.parentId + '/' + row.id + '/' + row.draftVersion })
        window.open(urlJump.href, '_blank')
      } else {
        let urlJump = this.$router.resolve({ path: '/library/file/view/' + this.parentId + '/' + row.id + '/' + row.version })
        window.open(urlJump.href, '_blank')
      }
    },
    handleNewFile() {
      let urlJump = this.$router.resolve({ path: '/library/file/new/' + this.parentId })
      window.open(urlJump.href, '_blank')
    },
    handleFileClass() {
      let urlJump = this.$router.resolve({ path: '/library/fileClass/' + this.parentId })
      window.open(urlJump.href, '_blank')
    },
    handleBatchFile() {
      let urlJump = this.$router.resolve({ path: '/library/file/batch/' + this.parentId })
      window.open(urlJump.href, '_blank')
    },
    handleGroup() {
      let urlJump = this.$router.resolve({ path: '/library/group' })
      window.open(urlJump.href, '_blank')
    },
    projectBuild(){
       if (this.selectedRowKeys.length != 1) {
        this.$message.warning('请选择一条记录！')
        return;
      }
      let fileId = this.selectedRowKeys[0]; 
      let file = this.fileList.find(item=>{
       return item.id ==   fileId    })
       if(!!file){
         
         var filePolicy = file.fileNo + file.fileName + file.version
         let urlJump = this.$router.resolve({ path: `/projectbuildstup/baseInfo?projectClass=61`+'&projectType='+'MB'+'&filePolicy='+filePolicy })
         window.open(urlJump.href, '_blank')
       }
      
    },
    handleAllFile() {
      
      // this.treeSelectedKeys = [parseInt(this.parentId)]
      this.ipagination.myFlag = 0
      this.ipagination.myManager = 0
      this.ipagination.myCollectFlag = 0
      this.ipagination.signFlag = 0
      this.ipagination.fileType = this.parentId
      
      this.fetchFileList(1)
    },
    handleMyManagerFile() {
      // this.treeSelectedKeys = [parseInt(this.parentId)]
      this.ipagination.myFlag = 0
      this.ipagination.myManager = 1
      this.ipagination.myCollectFlag = 0
      // this.ipagination.signFlag = 0
      this.ipagination.fileType = this.parentId
      this.fetchFileList(1)
    },
    handleMyFile() {
      // this.treeSelectedKeys = [parseInt(this.parentId)]
      this.ipagination.myFlag = 1
      this.ipagination.myManager = 0
      this.ipagination.myCollectFlag = 0
      // this.ipagination.signFlag = 0
      this.ipagination.fileType = this.parentId
      
      this.fetchFileList(1)
    },
    handleMyCollect() {
      // this.treeSelectedKeys = [parseInt(this.parentId)]
      this.ipagination.myFlag = 0
      this.ipagination.myManager = 0
      this.ipagination.myCollectFlag = 1
      // this.ipagination.signFlag = 0
      this.ipagination.fileType = this.parentId
      this.fetchFileList(1)
    },
    handleSignFlag(flag) {
      // this.treeSelectedKeys = [parseInt(this.parentId)]
      this.ipagination.myFlag = 0
      this.ipagination.myManager = 0
      this.ipagination.myCollectFlag = 0
      this.ipagination.signFlag = flag
      this.ipagination.fileType = this.parentId
      this.fetchFileList(1)
    },
    /**
     * 获取分类扩展属性
     */
    fetchClassAttr() {
      getAction(this.url.listAttr, { classId: this.classId }).then((res) => {
        if (res.success) {
          let attrs = res.result
          this.columns = [
            {
              title: '文件编号',
              dataIndex: 'fileNoStr',
              key: 'fileNoStr',
              scopedSlots: { customRender: 'fileNoStr' },
              // fixed: 'left',
            },
            {
              title: '文件名称',
              dataIndex: 'fileName',
              key: 'fileName',
              scopedSlots: { customRender: 'fileName' },
              //  fixed: 'left',
            },
            {
              title: '文件类型',
              dataIndex: 'fileTypeName',
              key: 'fileTypeName',
            },
              {
              title: '发布日期',
              dataIndex: 'effectTime',
              key: 'effectTime',
            },
            
          ]
          if (attrs != null) {
            attrs.forEach((attr) => {
              if (attr.showInTable) {
                this.columns.push({
                  title: attr.name,
                  dataIndex: 'attr' + attr.id,
                  key: 'attr' + attr.id,
                })
              }
            })
          }
          this.columns.push({
            title: '实施日期',
            dataIndex: 'issuedDate',
            key: 'issuedDate',
          })
       
          // this.columns.push({
          //   title: '操作',
          //   dataIndex: '',
          //   scopedSlots: { customRender: 'action' },
          // })
        }
      })
    },
    handleShowLog(type,record){
      this.$refs.logModal.showLog(type,record.id)
    },
    ToggleSelectType(code,type){

      this.searchTab[type]=code
      if(type === 'signStatus'){
       this.ipagination.signFlag = code
       
      }
      if(type === 'forecast'){
        this.forecast =[];
        this.handleForecastChange([])
        return;
      }
      this.ipagination.matchingCompany = false
      if(type === 'declareStatus' && code == '-1'){
          this.ipagination.matchingCompany = true
      }
      this.searchTab =  Object.assign({},this.searchTab)
      
      this.fetchFileList(1);
    },
    onChangeArea(value){
      //适用地区处理
      
      this.dics.mechanism = []
       if ( !!value &&value.length > 0 ) {
          this.searchTab.area = value.join('/')
          this.getMechanismList({area:this.searchTab.area})     
      }else{
        this.searchTab.area = ''

      }
      this.ToggleSelectType('','mechanism')
      
    },
    disabledDate(current) {
      // Can not select days before today and today
    
     
   
      return current && current <= moment().endOf('day');
    },

    handleForecastChange(value, mode,typeKey){
      
      if(value.length ==2 ){
        this.searchTab.forecastStart = value[0]
        this.searchTab.forecastEnd  = value[1]
        
      }else{
         this.searchTab.forecastStart =''
          this.searchTab.forecastEnd  = '' 
      }
      this.searchTab =  Object.assign({},this.searchTab)
      this.fetchFileList(1);
      
      // if(!!this.forecastStart && !!this.forecastEnd) {
      //   let forecastStart=  cloneDeep(this.forecastStart ) + '-01'
      //   let forecastEnd=   cloneDeep(this.forecastEnd )+ '-01'
      //   if(new Date(forecastStart )> new Date(forecastEnd )){
      //     this[typeKey] = '';
      //     this.searchTab[typeKey] = ''
      //     return
      //   }
        
      //   this.searchTab.forecastStart = value[0]
      //   let  forecastEndDate = new Date(forecastEnd)
      //   forecastEndDate.setMonth(forecastEndDate.getMonth() + 1)
      //   forecastEndDate = formatDate(forecastEndDate.getTime(),'yyyy-MM-dd')
      //   this.searchTab.forecastEnd  = value[1]
      //   this.searchTab =  Object.assign({},this.searchTab)
      //   this.ipagination.searchTabJson =  JSON.stringify(this.searchTab)   
      //    this.fetchFileList();
       
      // }
      
    },
    
    onChangeDepartment(value){

    },
    onChangeMonth(value){
      this.searchTab.publish=value;
      this.$forceUpdate();
       this.ToggleSelectType(value,'publish')
    },
     checkIsNew(row) {
      let isNew = false
      var createTime = row.createTime
      var myDate = new Date();
      myDate.setDate(myDate.getDate() - 10);
      myDate = new Date(formatDate(myDate.getTime(), 'yyyy-MM-dd'))
      const dateRow = new Date(createTime);
      
     
       getAction(this.url.ifSign + row.id).then(res=>{
          if (res.success) {
          if(!res.result && dateRow.getTime() > myDate.getTime()){
            this.$set(row, 'ifSign',true)
            row.ifSign = true
          }
        } else {
          this.$message.error(res.message)
        }
       })
      
      
     
    },
    onListChange(checkedList){
      
       this.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length;
      this.checkAll = checkedList.length === this.plainOptions.length && this.plainOptions.length > 0;
    },
    onCheckAllChange(e){
      Object.assign(this, {
        selectedRowKeys: e.target.checked ? this.plainOptions : [],
        indeterminate: false,
        checkAll: e.target.checked,
      });
    },
    showBtn(){
      if(this.ipagination.myFlag == 1 || this.ipagination.myManager == 1 || this.ipagination.myCollectFlag == 1){

          this.btnFlag = true;
      }else{
        this.btnFlag = false;
      }
    }
  
  },
}
</script>

<style lang="less" scoped>
@import '~@views/library/hteFile.less';

  /deep/ .j-table-force-nowrap{

    th{
    white-space: normal !important;
    }
  } 

.list-header{
  height: 28px;
   white-space: nowrap;
  overflow: hidden;
  position: relative;
  padding-left: 10px;

  span,a{
    // max-width: 15%;
    display: inline-block;
    font-weight: bold;
    font-size: 15px;
    padding-right: 16px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  a{
     max-width: 70%;
  }
     .status {
    width: 68px;
    padding: 0 7px;
    text-align: center;
    position: absolute;
    right: 0;
  z-index: 999;
  position: absolute;
  
}
.new-box {
     width: 60px;
    height: 20px;
    line-height: 20px;
    padding: 0 8px;
    margin-right: 8px;
    color: #fff;
    background-color: #ff5722;
    font-size: 12px;
    text-align: center;
    /* transform: rotate(45deg); */
    
    z-index: 999;
   
    /* border: 1px solid #d9d9d9; */
    border-radius: 4px;
    font-style: normal;
}
}
 /deep/ .list-content{
   .ant-col{
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      position: relative;
      text-align: left;
      padding-left: 10px;
      &.ant-col-5{
        text-align: right;
        padding: 0 10px;
        &:after{
          display: none;
        }
      }
      &:last-type-of{
        &:after{
          display: none;
        }
      }
   }
   .ant-col::after{
     position: absolute;
     top: 10%;
     right: 0;
     content: '';
     display: inline-block;
     height: 80%;
     width: 1px;
     background: #e8e8e8;

   }
  //  .ant-col:first-child{
  //    padding-left: 0;
  //  }
  //  .ant-col:last-child::after,.ant-col-20::after{
  //    display:none;
  //  }
    .ant-col.noline::after{
     display:none;
   }
}
// /deep/ .list-content-attr{
//   .ant-col:nth-child(6n + 1){
//      padding-left: 0;
//    }
// }
.app-container {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  background-color: #f5f5f5;
  align-items: flex-start;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}
.app-header {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-direction: column;
}

.app-title {
  height: 60px;
  /*line-height: 25px;*/
  display: flex;
  justify-content: center;
}
.app-title-box {
  width: 70vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
}
.app-title .user-info {
  width: 50vw;
}
.app-title .header-link-box {
  width: 150px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.app-search {
  width: 100%;
  height: 50px;
  padding: 10px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
}
.app-search-box {
  width: 70vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
}
.app-log {
  font-size: 24px;
  font-weight: bold;
}
.app-box-outter {
  width: 100%;
  display: flex;
  justify-content: center;
}
.app-box-inner {
  width: 70vw;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  position: relative;
}
.menu-list {
  width: 70vw;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: red;
}
.menu-item {
  padding: 22px 10px;
  font-size: 16px;
  font-weight: 200;
  color: #ffffff;
  cursor: pointer;
}
.condition-box {
  width: 70vw;
}
.condition-all {
  padding: 3px 10px;
}
.condition-list {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background-color: #ffffff;
}
.condition-item {
  display: flex;
  justify-content: flex-start;
  height: 40px;
  line-height: 40px;
  border-bottom: #f5f5f5 solid 1px;
}
.condition-label {
  width: 100px;
  padding-left: 10px;
}
.condition-value {
  display: flex;
  justify-content: flex-start;
}
.condition-value div {
  padding: 0px 10px;
}
div .data-main {
  display: flex;
  justify-content: flex-start;  

 padding-bottom: 15px;
  .box-right .project-card {
    div.line-bar-box p, p.line-bar-p{
      span{
        &:first-of-type{width: 90px;}
        &:last-of-type{width: calc(100% - 90px);}
      }
    }
  }  
}
.box-left {
  // width: 210px;
  background-color: #ffff;
  color: #000000;
  font-size: 16px;
  // // min-width: 210px;
  // // max-width: 210px;
  // height: 100%;
  // overflow:auto;
}
.ant-tree-switcher-line-icon {
  color: #ffffff !important;
}
.ant-tree li .ant-tree-node-content-wrapper {
  display: inline-block;
  height: 24px;
  margin: 0;
  padding: 0 5px;
  color: #ffffff;
  font-size: 14px;
  line-height: 24px;
  text-decoration: none;
  vertical-align: top;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s;
}
.box-right {
  background-color: #ffffff;
  font-size: 16px;
  position: relative;
  padding-bottom: 15px;
}
.main-top{
  padding-right: 56px;
  padding-left: 25px;
  background-color: #E9EBED;
  display: flex;
  align-items: center;
  >div{
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  /deep/ .ant-input-group.ant-input-group-compact{    
    width: 27vw;
    display: inline-block;
  }
}
.main-top>div > * {
  margin: 5px;
}
.allSelect{
  position: absolute;
  top: 15px;
  left: 0;
  /deep/ .ant-checkbox + span{
    padding: 0;
  }
}
.fixed-menu {
  position: fixed;
  right: 20px;
  z-index: 1;
  width: 80px;
  top: 175px;
}
.functionMould {
  background-color: #ffffff;  
  padding: 10px;
  text-align: center;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px;
  cursor: pointer;
  &:hover{
    >span,>i{color: #146595}
  }
}
.functionMould > span {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #000000;
  display: block;
}
.menu-icon {
  font-size: 24px;
  color: #31a0e1;
}
/deep/ .ant-tree-switcher {
  background: unset !important;
}


/deep/ .avatar-uploader .el-upload-list__item-status-label {
    display:none;
  }

// /deep/.el-upload-list{
//   display: none;
// }
/deep/ .ant-form input[type='file'] {
    display: none;
}
/deep/ .ant-btn-primary{
  background: #4095e4;
  margin-right: 10px;
}
/deep/ .ant-btn-primary[disabled]{
 background-color: #f5f5f5;

}
/deep/ .ant-btn{
  // width: 85px;
  height: 30px;
  border-radius: 2px;
  margin: 2px;
  padding: 0 7px;
  span{margin-left: 2px;}
}

/deep/.trademarkInfoPopUp{
  .headerControl{
    text-align: right;
    margin-bottom: 10px;
  }
  .ant-modal-title{
    font-weight: 900;
  }
  .ant-modal-footer{
    text-align: center;
    padding: 20px;
  }
  .ant-modal-header{
    text-align: center;
  }
  .ant-descriptions-bordered .ant-descriptions-item-label{
    width: 170px;
    background-color: #d9dee8;
    border-bottom: 1px solid #f7f7f7
  }
  .ant-descriptions-view{
    border-radius: unset;
  }
  .ant-table-thead > tr > th {
    background: #dadee9 !important;
    padding: 10px;
  }
  .ant-table-thead > tr:first-child > th:first-child,.ant-table table{
    border-radius: unset;
    line-height: 1;
  }

  .ant-table-thead > tr:first-child > th:first-child,.ant-table table{
    border-radius: unset;
    line-height: 1;
  }
  .ant-table-tbody .ant-table-row td{
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
/deep/ .productServicePopUp,/deep/ .intellectualInfoPopUp,/deep/.createTrademarkoPopUp{
  .ant-modal-title{
    font-weight: 900;
  }
  .ant-modal-header{
    text-align: center;
  }
  .ant-col-12{
    margin: 5px 0;
  }
  .ant-btn{
    width: fit-content;
  }
  .new-box{
    padding: 0 50px 20px;
  }
  .product-list{
    border: 1px solid #f5f5f5;
    border-radius: 3px;
    padding: 20px 50px;
    .product-name{
      margin-left: 20px;
    }
  }
  .ant-modal-footer{
    text-align: center;
    padding: 20px;
  }
  .btn{
    text-align: center;
    margin: 30px 0 0;
  }
  .ant-form-item{
    margin-bottom: 0;
  }
  .changeStyle .ant-form-item-label{
    line-height: unset;
    white-space:pre-wrap;
  }
  .upload-demo{
    /deep/ .ant-table-thead > tr > th {
      background: #d9dee8 !important;
    }
    /deep/.ant-table-thead > tr:first-child > th:first-child,/deep/ .ant-table table{
      border-radius: unset;
      line-height: 1;
    }
  }
}
/deep/ .selectKeywordPopUp {
  .ant-col-8{
    margin: 5px 0;
  }
  .ant-modal-title{
    font-weight: 900;
  }
  .ant-modal-header{
    text-align: center;
  }
  .ant-modal-footer{
    text-align: center;
    padding: 20px;
  }
}
/deep/ .processInforPopUp{
  .ant-modal-body{
    padding: 20px 75px;
  }
  .ant-timeline-item-head{
    background-color: #4095e4;
  }
  .ant-timeline-item-tail{
    border-left: 2px dotted #e8e8e8;
  }
  .processStep{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 0 10px;
    margin-top: 10px;
    .processTime{
      display: flex;
      font-weight: 700;
      span{
        display: inline-block;
        margin-right: 25px;
      }
    }
  }
}
/deep/ .ant-checkbox-group{width: calc(100% - 10px); margin-left: 10px;}
/deep/ .mainTainPopUp,/deep/ .selectAgencyPopUp,/deep/.selectProposerPopUp,/deep/ .selectServicePopUp,/deep/ .productDetailPopUp{
  .ant-modal-title{
    color: #fff;
    font-weight: 900;
  }
  .ant-modal-body{
    padding: 24px 24px 0 24px;
  }
  .ant-input-group.ant-input-group-compact{
    display: flex;
    width: 40%
  }
  .ant-modal-header{
    background: #388cdb;
    color: #fff;
    text-align: center;
  }
  .ant-modal-footer{
    text-align: center;
    padding: 20px;
  }
  .ant-btn-primary{
    background: #4095e4;
  }
  .ant-btn{
    width: 85px;
    height: 30px;
    border-radius: 2px;
    margin-right: 10px;
  }
  .ant-table-thead > tr > th {
    background: #dadee9 !important;
    padding: 10px;
  }
  .ant-table-thead > tr:first-child > th:first-child,.ant-table table{
    border-radius: unset;
    line-height: 1;
  }

  .ant-table-thead > tr:first-child > th:first-child,.ant-table table{
    border-radius: unset;
    line-height: 1;
  }
  .ant-table-tbody .ant-table-row td{
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .headerControl{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  .selected-box{
    border: 1px solid #eeeeee;
    border-radius: 5px;
    padding: 0px 0 0 10px;
    .ant-select-selection{
      border:unset;
      border-left: 1px solid #eee;
      border-radius: unset;
      margin-left: 10px;
    }
  }
}
  .toggleClick{
    background-color: #0581ca;
    border-bottom: 1px solid #1890ff;
    cursor: pointer;
  }
  .icon-plus{
    font-size: 13px;
    padding-right: 5px;
  }
  .main{
    min-height: 100%;
    background: #f5f5f5;
       
    position: relative;
  }
  .container{
    padding: 0 125px 100px;
    height: 100%;
   
    .navbar{
      display: flex;
      justify-content: space-between;
      align-items: center;      
      >ul{
        list-style: none;
        display: flex;
        padding: 0;
        background: #31a0e1;
        color: #fff;
        margin-top: 20px;
        margin-bottom: 0;
        width: 100%;
        li{
          padding: 7px 31px;
          cursor: pointer;
        }
      }
    }
    .trademark-nav{
      background: #fff;      
      border: 1px solid #e2e2e2;
      color: #000;
      -webkit-transition: max-height,margin-top .3s;
      transition: max-height,margin-top .3s;
      overflow: hidden;
      max-height: 700px;
      margin-top: 15px;      
      .hoverShow{
        cursor: pointer;
        border-bottom: 3px solid rgba(255, 255, 255, 0);
        &:hover{
          border-bottom: 3px solid #31a0e1;
        }
      }
      .clickShow{
        border-bottom: 3px solid #31a0e1;
        color: #31a0e1;
        cursor: pointer;
      }      
      .projec-class-box{
          font-weight: 600;
          // background: #f5f5f5;
          display: flex;
          border-bottom:1px solid #f2f2f2;
          justify-content: center;
          align-items: center;
          &:last-of-type{border-bottom: none}
          .projec-class-lable{
            width: 120px;
            padding: 10px 0 10px 30px;
            // float: left;
            font-size: 15px;
            text-align: left;
          }
          .projec-class-list{
            width: calc(100% - 120px);
            padding-left: 10px;
            color: rgba(0, 0, 0, 0.65);
            margin: 0;
            //  float: left;
            //  background: #fff;
            display: block;
            position: relative;
            padding: 0;
            list-style: none;
            li{
              float: left;
              padding: 10px 15px;
              &.input-li{
                padding: 7px 5px;
                /deep/ input,  /deep/ .ant-select{
                  line-height: 27px;
                  height: 27px;
                  position: relative;
                  top: 2px;
                  width: 182px;
                  &.ant-calendar-range-picker-input{
                    top: -4px;
                  }
                }
                /deep/ .ant-select-selection, /deep/ .ant-select-selection>div, /deep/ .ant-calendar-picker-input.ant-input{
                  height: 27px;
                  line-height: 27px;
                }
                &.input-li-active{
                  /deep/ .ant-cascader-picker, /deep/ .ant-input{color: #31a0e1; font-weight: inherit;}                  
                }
                /deep/ .ant-select-selection__placeholder{
                  font-weight: normal;
                }
              }
            }
          } 
          &.projec-class-input{
            >div{flex: 1;}
            .projec-class-list{width: auto;}
          }
          .btn-more{display: none;}
          &.project-class-more{
            padding-right: 63px;
            position: relative;
            .btn-more{
              display: inline-block;
              position: absolute;
              right: 10px;
              top: 11px;
              padding: 0px 5px;
              cursor: pointer;
              color: #999;
              font-weight: normal;
              &:hover{
                color: #0581ca;
                background-color: #e4e4e4;
                .icon-child-down{
                  color: #0581ca;
                }
              }
            }
            ul{
              -webkit-transition: all .3s;
              transition: all .3s;
              overflow: hidden;
              max-height: 700px;
              &.projec-class-list-more{
                max-height: 44px;
              }
            }
          }     
      }
      &.trademark-nav-hidden{
        margin-top: 0;
        max-height: 0;
        border: 0;      
      }      
    }
    .trademark-tap{
      padding: 8px;
      width:100%;      
      text-align: center;
      color: #999;       
      >span{padding: 5px;cursor: pointer;
        &:hover{
          color: #0581ca;
          background-color: #e4e4e4;
          .icon-child-down{
            color: #0581ca;
          }
        }
      }      
    }
    .showTotal{
      vertical-align: middle;
    }
       .reservation-content{
         /deep/ .ant-table-body::-webkit-scrollbar-track {
                  background: #fff;
         }
          margin-top: 20px;
          /deep/ .ant-table-small{
            border: unset;
            border-radius: unset;
          }
          /deep/ .ant-table-thead > tr > th{
            border: unset;
            border-radius: unset;
          }
          /deep/ .ant-table-thead{
            background-color:#d5dae4 ;
          }
          /deep/ .ant-table-small > .ant-table-content > .ant-table-body{
            margin: 0;
          }
        }
    .trademark-content{
      background: #fff;
      margin-top: 10px;
      border: 1px solid #ededed;
      .controlarea{
        padding: 15px 0 5px 10px;
      }
      .trademark-list{
        .reservation-content{
          margin-top: 20px;
          /deep/ .ant-table-small{
            border: unset;
            border-radius: unset;
          }
          /deep/ .ant-table-thead > tr > th{
            border: unset;
            border-radius: unset;
          }
          /deep/ .ant-table-thead{
            background-color:#f6f7f9 ;
          }
          /deep/ .ant-table-small > .ant-table-content > .ant-table-body{
            margin: 0;
          }
        }
      }
    }
  }
  
     .floatNavTab{
        position: fixed;
        right: 25px;
        top:233px;
        // border: 1px solid #e2e2e2;
        background-color: #31a0e1;
        padding: 0;
        li {
        list-style: none;
        cursor: pointer;
        padding: 10px 20px;
        margin: 0;
        color: #ffffff;
        border-bottom: 1px solid #f5f5f5;
       
      }
        .budget-detail,.mission-detail,.invitation-detail{
          border-bottom: 1px solid #f5f5f5;
        }
        .budget-detail,.mission-detail,.invitation-detail,.commissioned-detail{
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 15px 10px;
          cursor: pointer;
          img{
            margin-bottom: 5px;
          }
          span{
            color:#6cb299;
          }
          p{
            margin: 0;
            color: #ffffff;
          }
        }
      }

@media (max-width: 1600px){
  .ant-col-xl-10 {
    width: 50% !important;
  }  
}
@media (max-width: 1400px){
  .trademark-nav{
    /deep/ input,  /deep/ .ant-select{
      width: 152px !important;
    }
  }  
}    
@media all and (max-width: 1342px) {
  .input-li{
    /deep/ input,  /deep/ .ant-select{
      width: 132px !important;
    }
  }
}  
@media all and (max-width: 1225px) {
  .projec-class-input{display: block !important;
    >div:not(:last-child){border-bottom: 1px solid rgb(242, 242, 242);}
  }
}  
@media (max-width: 1080px){
  .banner > .title-box{padding-left: 30px;}
  .container{padding: 0 30px 100px !important}
}

.status-box{
  width: 100px;
  height: 20px;
  line-height: 20px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  transform: rotate(45deg)scale(0.85);
  top: 7px;
  right: -37px;
  z-index: 1;
  position: absolute;
  display: inline-block !important;
}

    .projectStatusColor1 {
        background-color: #9DB7F0;
    }
    .projectStatusColor2 {
        background-color: #ff5722;
    }
    .projectStatusColor3 {
        background-color: #BDBEC0;
    }
    .icon-child-down{
        font-size: 11px;
        margin-left: 3px;
        transition: all .3s;
        color: #999;
        &.icon-child-up{
          transform: rotate(180deg);
        }
      }      
      /deep/ .ant-list *{
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
      }
</style>